<template>
    <el-table :data="tableData" border style="width: 100vw;height: 75vh;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"/>
      <el-table-column label="id" width="100">
        <template #default="scope">
          <div>
            <span>{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="120">
        <template #default="scope">
          <div>
            <span>{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="100">
        <template #default="scope">
          <div>
            <span>{{ scope.row.gender }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="180">
        <template #default="scope">
          <div>
            <span>{{ scope.row.telephone}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="250">
        <template #default="scope">
          <div>
            <span>{{ scope.row.email}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="150">
        <template #default="scope">
          <div>
            <span>{{ scope.row.address}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="150">
        <template #default="scope">
          <div>
            <img style="width: 5vw;height: 6vh;" src="../assets/default.jpg" :class="scope.row.portraitPath"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="warning" style="width: 4vw; height: 3vh;"
            >修改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)" style="width: 4vw; height: 3vh;"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </template>
    
    <script>
    import axios from 'axios'
    export default {
      name:'AdminTable',
      data(){
        return{
          tableData:[
          ],
        }
      },
      methods:{
        handleEdit(index,row){
          console.log(index, row)
        },
        handleDelete(index,row){
          console.log(index, row)
        },
        handleSelectionChange(val){
          console.log(val)
        }
    },
    mounted(){
      var that=this
      axios.get('http://192.168.67.130:8080/project-springboot-0.0.1-SNAPSHOT/SelectAllAdmin')
      .then(function(res){
        for(var i=0;i<res.data.length;i++){
          that.tableData.push(res.data[i])
        }
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
    </script>